<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SJ2</title>
    <style>
        ul li{
            list-style: none;
        }
        .classA{
            text-decoration: line-through;
           color: pink;
        }
       
      
    </style>
</head>
<body>
   
    <div id="app">
       
   
        <h1>任务列表</h1>
        <p>任务总数:{{bool}};还有:{{number}}未完成;<button @click='delet'>完成</button></p>
        <ul>
            <li v-for="(item,index) in lesson":key="index" @delete='delet'>
            
                <input type="checkbox" id="query" checked="item.flg" @change="doit(index)"/><span v-on:click='bj(index)'  :class="[item.flg ? 'classA': 'classB']">{{item.name }}</span>
            </li>
        </ul>
        <div>
         <input v-model='msg' placeholder="请输入要添加的内容" /> <button @click='fn'>添加</button>
        </div>
        


    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                bool:4,
                number:4,
                msg:'',
                lesson:[
                    {name:'UI设计',flg:false},
                    {name:'编写页面代码',flg:false},
                    {name:'编写js代码',flg:false},
                    {name:'设计产品原型',flg:false},
                ]
            },
            methods:{
                fn:function(){
                  this.lesson.push({
                    name:this.msg
                  })
                },
        
               doit(index){
                   this.lesson[index].flg=!this.lesson[index].flg
                
               },
               delet(index){
              
               },

            bj(number){
                for(var i=0;i<this.lesson.length;i++){
                        if(number==i){
                            let m=this.lesson[number].name;
                        this.msg=m;
                        this.lesson[i].name=this.msg
                        }else{
                            this.lesson[i].falg=false;
                        }
                   }
                }
            }
            
        })
    </script>
</body>
</html>